<template>
	<view>
		<navBar title="发优惠券"></navBar>
		<view class="top-bg"></view>
		<view class="content" v-if="!qrcodeId">
			<view class="plate-panel">
				<view class="title">输入车牌号</view>
				<view class="car-no">
					<view class="car-no-item car-no-item-first" :class="{ active: currentInputIndex == 0 }"
						@click="handleShowPlate(0)">
						{{plateArr[0]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 1 }" @click="handleShowPlate(1)">
						{{plateArr[1]===''?'':plateArr[1]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 2 }" @click="handleShowPlate(2)">
						{{plateArr[2]===''?'':plateArr[2]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 3 }" @click="handleShowPlate(3)">
						{{plateArr[3]===''?'':plateArr[3]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 4 }" @click="handleShowPlate(4)">
						{{plateArr[4]===''?'':plateArr[4]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 5 }" @click="handleShowPlate(5)">
						{{plateArr[5]===''?'':plateArr[5]}}
					</view>
					<view class="car-no-item" :class="{ active: currentInputIndex == 6 }" @click="handleShowPlate(6)">
						{{plateArr[6]===''?'':plateArr[6]}}
					</view>
					<view @click="handleShowPlate(7)" class="car-no-item "
						:class="{'car-no-item-last':plateArr[7]==='','active':currentInputIndex == 7}">
						<view v-if="plateArr[7]===''&&currentInputIndex != 7">
							<view>新</view>
							<view>能</view>
							<view>源</view>
						</view>
						<view v-else>{{plateArr[7]}}</view>
					</view>
				</view>
				<view class="history" v-if="historyPlate.length">
					<view class="history-title">
						<text>常用车辆</text>
						<view class="sub">
							<text>历史车牌</text>
							<u-icon name="trash" size="16" color="#B1B1B1" @click="removeHistoryPlate"></u-icon>
						</view>
					</view>
					<view class="plate-list">
						<view class="plate" v-for="(item,index) in historyPlate" :key="index"
							@click="handleSelectPlate(item)">
							{{item}}
						</view>
					</view>
				</view>
			</view>
			<view class="send" @click="sendCoupon">{{appoint==='1'?'确定发送':'绑定并领取'}}</view>
		</view>
		<plateKeyboard v-if="show" :plate="plateArr.join('')" :index.sync="currentInputIndex"
			@indexChange="handleIndexChange" @chooseKey="handleChooseKey" @export="handleExport" @close="show=false">
		</plateKeyboard>
		<u-popup
		:border-radius="22"
		mode="center" v-model="showOverlay">
			<view class="popup-msg">
				<image class="popup-msg-bg" :src="bg_image.couponPopup"></image>
				<view class="popup-msg-text">
					<view class="text1">恭喜</view>
					<view class="text2">
						恭喜获得一张{{successMsg.couponMoney || ''}}元{{successMsg.merchantCouponType===1?'满减券':'全免券'}}</view>
					<view class="text3">有效期至{{successMsg.expireTime}}</view>
				</view>
				<view class="use" @click="goUse"></view>
				<u-icon class="popup-msg-close" color="#fff" name="close" size="30"  @click="closeCoupon"></u-icon>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import couponByPlate from './js/couponByPlate'
	
	import plateKeyboard from './components/plateKeyboard/index.vue'
	export default {
		components: {
		   plateKeyboard
		},
		...couponByPlate 
	}
</script>

<style lang="less" scoped>
	@import url('./css/couponByPlate.less');
</style>